<template>
  <div class="container-top" :class="isFixed ? 'fixedTop' : ''">
    <div class="view_warpper warpper_box">
      <div class="left">
        <div class="logo" @click="$router.push('/')">
          <h1 @click="$router.push('/')">
            <!-- <img src="../static/home/logo.png" /> -->
            <img
              src="https://img.tuguaishou.com/designer_upload_asset/15/56/19/00/13/5d/5d349c94a45b42f65ded71fafc2c6a8a.png!w300_w?auth_key=2271254400-0-0-089a27155e1d7184dcd6cf801fc2092b"
            />
          </h1>
        </div>
        <div class="nav-list">
          <div class="items" v-for="(item, index) in navlist" :key="index">
            <router-link :to="item.path">{{ item.name }}</router-link>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- 没有登录状态 -->
        <div class="logout" v-if="!$store.state.token">
          <div class="items">
            <nuxt-link to="/login">你好,请登录</nuxt-link>
          </div>
        </div>
        <!-- 有登录状态 -->
        <div class="login" v-else>
          <div class="items">
            <el-avatar :size="40" :src="circleUrl"></el-avatar>
          </div>
          <div class="items">
            {{ $store.state.username }}
          </div>
        </div>
        <div class="myorder">
          <nuxt-link to="/order">我的订单</nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      isFixed: false,
      currentIndex: 0,
      navlist: [
        { name: "首页", path: "/" },
        { name: "酒店", path: "/hotel" },
        { name: "推荐攻略", path: "/scenicDiscounts" },
        { name: "周边游", path: "/selfDrive" },
        { name: "旅游快讯", path: "/timeLimit" },
      ],
      circleUrl:
        "https://img.ixintu.com/upload/jpg/20210525/e4caba22c830ebca9ec2505b3553f12f_74127_800_800.jpg!ys",
    };
  },
  methods: {
    // 获取当前页面的滚动的值
    getScollTop() {
      if (document.documentElement.scrollTop > 500) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
  },
  mounted() {
    if (process.browser) {
      window.addEventListener("scroll", this.getScollTop);
    }
  },
  watch: {},
  computed: {},
};
</script>
<style scoped lang="scss">
.fixedTop {
  position: fixed;
  transform: translateX(-50%);
  left: 50%;
  top: 0;
  z-index: 99;
  width: 100%;
  box-shadow: 8px 4px 8px rgba(100, 100, 100, 0.3);
}
.container-top {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: center;
  background-color: #37bcfb;
  .view_warpper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 18px;
    .left {
      display: flex;
      height: 100%;
      align-items: center;
      .logo {
        height: 100%;
        margin-right: 20px;
        h1 {
          margin: 0;
          padding: 10px auto;
          height: 100%;
          font-size: 0;
          img {
            height: 100%;
          }
        }
      }
      .nav-list {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        .items {
          height: 60px;
          width: 100px;
          margin: 0 10px;
          a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            color: #fff;
            font-size: 16px;
            &.nuxt-link-exact-active {
              background-color: #fff;
              color: #37bcfb;
            }
          }
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      .logout {
        display: flex;
        align-items: center;
        .items {
          margin: 0 10px;
          a {
            color: #fff;
            font-size: 16px;
          }
        }
      }
      .login {
        display: flex;
        align-items: center;
        .items {
          margin-left: 10px;
          a {
            color: #fff;
            font-size: 16px;
          }
        }
      }
      .myorder {
        padding: 0px 20px;
        a {
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
